<template>
  <el-card :style="{height: model.height.value}">
    <div class="city-weather-cloudy">
      <div class="city-weather-body">
        <div class="city-weather-body-context-title">
          <div class="city-weather-body-local">
            <i class="el-icon-location-outline"></i> {{ this.form.city }}
            <!--            <i class="el-icon-date"></i> {{ this.form.date }} {{ this.form.week }}-->
          </div>
          <el-button size="mini" circle icon="el-icon-refresh-right" @click="handleQuery"></el-button>
        </div>
        <div class="city-weather-body-context">
          <div class="city-weather-body-context-img">
            <img style="height: 110px;width: 110px;" src="@/assets/weather/101.png"/>
          </div>
          <div class="city-weather-body-context-font">
            <div class="city-weather-body-context-font1">{{ this.form.tem_day }}°</div>
            <div class="city-weather-body-context-font2">{{ this.form.wea }}</div>
          </div>
        </div>
        <div class="city-weather-body-context-notify">
          今天晴，比昨天暖和很多，空气不错。
        </div>
      </div>
      <div class="city-weather-foot">
        <table>
          <tr>
            <td class="td-title">{{ this.form.win_speed }}</td>
            <td class="td-title">{{ this.form.humidity }}</td>
            <td class="td-title">{{ this.form.tem }}°</td>
            <td class="td-title">{{ this.form.pressure }}KPa</td>
          </tr>
          <tr>
            <td class="td-txt">{{ this.form.win }}</td>
            <td class="td-txt">相对湿度</td>
            <td class="td-txt">体感温度</td>
            <td class="td-txt">大气压</td>
          </tr>
        </table>
      </div>
    </div>
  </el-card>
</template>

<script>

import { getWeather } from '@/api/sysWeather'

export default {
  name: 'Weather',
  props: ['model'],
  data() {
    return {
      form: {
        wea_img: ''
      }
    }
  },
  methods: {
    handleQuery() {
      getWeather().then(res => {
        if (res.code === 20000 && res.data) {
          this.form = res.data
        }
      })
    }
  },
  mounted() {
    this.handleQuery()
  }
}
</script>

<style scoped>

/deep/ .el-card__body {
  height: 100%;
  padding: 0 0 !important;
}

.city-weather-cloudy {
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.city-weather-body-context-img {
  width: 110px;
  height: 110px;
  text-align: center;
}

.city-weather-body-context-title {
  display: flex;
  justify-content: space-between;
  margin: 10px 10px;
}

.city-weather-body-context {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.city-weather-body-context-notify {
  text-align: center;
  width: 100%;
  color: rgba(0, 0, 0, 1);
}

.city-weather-body-context-font {
  text-align: center;
  line-height: 55px;
}

.city-weather-body-context-font1 {
  font-size: 52px;
  line-height: 1;
}

.city-weather-body-context-font2 {
  font-size: 22px;
  font-weight: bold;
  text-align: left;
}

.city-weather-foot {
  display: flex;
  text-align: center;
  width: 100%;
  justify-content: center;
}

table {
  border-radius: 20px;
  width: 70%;
  margin: 10px 10px;
}

tr {
  height: 32px;
  text-align: center;
}

.td-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.td-txt {
  margin-top: 7px;
  font-size: 12px;
  font-weight: normal;
  line-height: 12px;
}
</style>
